<!DOCTYPE html>
<html lang="en">
<head th:include="certificateWeb/headFoot :: headerCss">
</head>
<link rel="stylesheet" href="/css/certificateWeb/stationApplyFor/stationApplyFor.css">
<style>
    .span_1 {
        width: 160px !important;
    }
</style>
<body id="body">
<div th:include="certificateWeb/headFoot :: header"></div>
<main id="main">
    <section class="sec_1">
        <div class="div_1">
            <ul>
                <li class="this"><a href="/certificate/my">个人信息</a></li>
                <li><a href="/certificate/isResume">我的简历</a></li>
                <!-- <li><a href="/certificate/findApplyExam">报名记录</a></li> -->
                <li><a href="/certificate/infoRecordList">表单提交记录</a></li>
                <li><a href="/certificate/expertRecordList">专家申请记录</a></li>
                <li><a href="/certificate/stationRecordList">考核站点申请记录</a></li>
                <li><a href="/certificate/stationPxRecordList">培训基地申请记录</a></li>
                <li><a href="/certificate/gradeQuery">成绩查询</a></li>
                <li ><a href="/certificate/message">消息中心</a></li>
                <li onclick="mock2(this)" data-type="2"><a>幼儿照护初级模拟考试</a></li>
                <li onclick="mock2(this)" data-type="1"><a>幼儿照护中级模拟考试</a></li>
                <li onclick="mock2(this)" data-type="0"><a>幼儿照护高级模拟考试</a></li>
            </ul>
        </div>
        <div class="div_2">
            <label class="label_title">个人信息—编辑个人信息</label>
            <hr/>
            <form id="formId"></form>
        </div>
        <div style="clear: both"></div>
    </section>
</main>
<div th:include="certificateWeb/headFoot :: footer"></div>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<script src="/js/jquery.citys.js"></script>
<script type="text/javascript" src="/js/mobile.js"></script>
</body>
<script>

    $(function () {
        validateRule();
        //获取用户信息
        selUserDetail();
    });
    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });

    function selUserDetail() {
        ajaxToken("/jzApi/user/selUserDetail", "GET", {}, function (res) {
            var res = JSON.stringify(res);
            res = res.replace(/null/g, '""');
            res = JSON.parse(res);
            var a = '<div style="margin-left:290px;">' +
                '                <img id="test" src="' + res.headPortrait + '" style="width:147px;height:206px;margin-top: 20px "/>' +
                '            </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">照片<span style="color: #D52525">*</span>：</label>' +
                '                    <button type="button" class="btn inp_1" style="margin-top: 20px" id="btnUpload">' +
                '                        <i class="fa fa-cloud"></i>重新上传寸照' +
                '                    </button>' +
                '                    <input type="text" value="' + res.headPortrait + '" style="opacity:0;width: 1px;" id="img" name="headPortrait" />' +
                '                    <label class="wd160">注意：请上传小于1M的寸照</label>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">用户名<span style="color: #D52525">*</span>：</label>' +
                '                    <input name="username" value="' + res.username + '" id="username"  class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">真实姓名<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" name="name" value="' + res.name + '" id="name" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">性别<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="hidden" value="' + res.sex + '" id="sex1" placeholder="" class="form-control inp_1" />' +
                '                    <select id="sex" name="sex"  class="form-control inp_1">' +
                '                        <option  value="">请选择</option>' +
                '                        <option value="1">男</option>' +
                '                        <option value="2">女</option>' +
                '                    </select>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">身份证号<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="idNumber" value="' + res.idNumber + '"  name="idNumber" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">手机号<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="mobile" value="' + res.mobile + '" name="mobile" class="form-control inp_1" />' +
                '                </div>' +
                '                 <!--企业申请独有字段-->' +
                '                <div class="div_3 company"  >' +
                '                    <label class="span_1">所属机构/学校名称<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" data-id="orgName" id="orgName" value="' + res.orgName + '" placeholder="" name="orgName" data-primary-key="orgName" data-field="orgName"  class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3 company"  >' +
                '                    <label class="span_1">出生年月<span style="color: #D52525">*</span>：</label>' +
                '                    <input id="dateOfBirth" name="dateOfBirth" class="form-control inp_1"' +
                '                           type="text" value="' + res.dateOfBirth + '" placeholder="请输入出生年月">' +
                '                </div>' +
                '                <div class="div_3 company"  >' +
                '                    <label class="span_1">民族<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="hidden" id="nation1" value="' + res.nation + '" placeholder=""   class="form-control inp_1" />' +
                '                    <select id="nation" name="nation" class="form-control inp_1">' +
                '                        <option value="">请选择</option>' +
                '                        <option value="汉族">汉族</option>' +
                '                        <option value="蒙古族">蒙古族</option>' +
                '                        <option value="回族">回族</option>' +
                '                        <option value="藏族">藏族</option>' +
                '                        <option value="维吾尔族">维吾尔族</option>' +
                '                        <option value="苗族">苗族</option>' +
                '                        <option value="彝族">彝族</option>' +
                '                        <option value="壮族">壮族</option>' +
                '                        <option value="布依族">布依族</option>' +
                '                        <option value="朝鲜族">朝鲜族</option>' +
                '                        <option value="满族">满族</option>' +
                '                        <option value="侗族">侗族</option>' +
                '                        <option value="瑶族">瑶族</option>' +
                '                        <option value="白族">白族</option>' +
                '                        <option value="土家族">土家族</option>' +
                '                        <option value="其他">其他</option>' +
                '                    </select>' +
                '                </div>' +
                '                <!--学校申请独有字段-->' +
                '                <div class="div_3 school" >' +
                '                    <label class="span_1" >学历<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="hidden" id="education1" value="' + res.education + '" placeholder="" class="form-control inp_1" />' +
                '                    <select id="education" name="education" class="form-control inp_1">' +
                '                        <option value="">请选择</option>' +
                '                        <option value="博士后">博士后</option>' +
                '                        <option value="博士">博士</option>' +
                '                        <option value="研究生">研究生</option>' +
                '                        <option value="本科">本科</option>' +
                '                        <option value="大专">大专</option>' +
                '                        <option value="大专以下">大专以下</option>' +
                '                    </select>' +
                '                </div>' +
                '                <div class="div_3 school" >' +
                '                    <label class="span_1" >专业<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="major" value="' + res.major + '" placeholder="" name="major"  class="form-control inp_1" />' +
                '                </div>' +
                '                    <div class="div_3">' +
                '                    <label class="span_1">政治面貌<span style="color: #D52525">*</span>：</label>' +
                '                        <select id="politicalAffiliation" name="politicalAffiliation" class="form-control inp_1">' +
                '                            <option value="">请选择</option>' +
                '                            <option value="群众">群众</option>' +
                '                            <option value="中国共青团团员">中国共青团团员</option>' +
                '                            <option value="中国共产党党员">中国共产党党员</option>' +
                '                            <option value="无党派民主人士">无党派民主人士</option>' +
                '                            <option value="民主党派人士">民主党派人士</option>' +
                '                        </select>' +
                '                    <input type="hidden" id="politicalAffiliation1" value="' + res.politicalAffiliation + '" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">职务职称<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="officialCapacity" value="' + res.officialCapacity + '" name="officialCapacity" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">QQ：</label>' +
                '                    <input type="text" id="QQ" name="QQ" value="' + res.qq + '" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">邮箱：</label>' +
                '                    <input type="text" id="email" name="email" value="' + res.email + '" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">学习、工作经历<span style="color: #D52525">*(800字以内)</span>：</label>' +
                '                    <textarea style="width:450px;height:320px" type="text" id="experience" name="experience"  class="form-control inp_1">' + res.experience + '</textarea>' +
                '                </div>' +
                '                <div class="div_3" id="adre">' +
                '                    <label class="span_1">现居住地省市区<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="hidden" style="width: 150px" id="province" value="' + res.province + '" />' +
                '                    <input type="hidden" style="width: 150px"  id="city" value="' + res.city + '" />' +
                '                    <input type="hidden" style="width: 150px"  id="district" value="' + res.district + '" />' +
                '                    <select class="form-control inp_1" name="province" style="width: 150px"></select>' +
                '                    <select class="form-control inp_1" name="city" style="width: 150px;"></select>' +
                '                    <select class="form-control inp_1" name="district" style="width: 150px"></select>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">现居住地<span style="color: #D52525">*</span>：</label>' +
                '                    <textarea  style="width:450px;height:70px " type="text" id="liveAddress"  name="liveAddress" class="form-control inp_1">' + res.liveAddress + '</textarea>' +
                '                </div>' +
                '                <input type="hidden" value="101" name="lastEdit" /><div class="div_3">' +
                '                    <button class="form-control but_1" id="send" type="submit">提交</button>' +
                '                </div>'
            $("#formId").html(a);
            $("#politicalAffiliation").val($("#politicalAffiliation1").val());
            $("#sex").val($("#sex1").val());
            $("#nation").val($("#nation1").val());
            $("#education").val($("#education1").val());
            //省市区联动
            $('#adre').citys({
                province: $("#province").val(),
                city: $("#city").val(),
                district: $("#district").val(),
                onChange: function (info) {
                }
            });

            if ($("#orgName").val() != "") {
                $("#orgName").attr("readonly", true);
            } else {
                // 加载机构信息
                orgData();
            }


            layui.use(['upload', 'laydate'], function () {
                var upload = layui.upload;
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#dateOfBirth'
                });
                //执行实例
                upload.render({
                    elem: '#btnUpload', //绑定元素
                    url: '/jzApi/utils/fileImprot', //上传接口
                    // auto: false,
                    accept: 'images',
                    acceptMime: 'image/*', //只筛选图片
                    size: 1024, //限定大小
                    done: function (r) {
                        $("#img").val(r.data);
                        $("#test").attr("src", r.data);
                    },
                    error: function (r) {
                        layer.msg(r.msg);
                    }
                });
            });
        })
    }


    //保存个人信息
    function save() {
        if (!cardId().checkIdCardNo($("#idNumber").val().trim())) {
            layer.msg('请输入正确的身份证号');
            return false;
        }
        ajaxTokenForm("/jzApi/user/editUserDetailDoor", "POST", $('#formId').serialize() , function (res) {
            location.href = '/certificate/my'
        })
    }

    // 机构下拉选择框
    function orgData() {
        ajaxToken("/jzApi/user/selmechanismList", "POST", {}, function (res) {
            var res = JSON.stringify(res);
            res = res.replace(/null/g, '""');
            res = JSON.parse(res);

            // TODO 样式还需调整
            $('#orgName').selectPage({
                showField : 'name',
                keyField : 'name',
                data : res
            });
        });
    }


    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#formId").validate({
            rules: {
                imgUrl: {
                    required: true
                },
                username: {
                    required: true
                },
                name: {
                    required: true
                },
                sex: {
                    required: true
                },
                dateOfBirth: {
                    required: true
                },
                nation: {
                    required: true
                },
                education: {
                    required: true
                },
                major: {
                    required: true
                },
                politicalAffiliation: {
                    required: true
                },
                officialCapacity: {
                    required: true
                },
                idNumber: {
                    required: true,
                    isIdentity: true
                },
                orgName: {
                    required: true
                },
                province: {
                    required: true
                },
                 city: {
                     required: true
                 },
                // district: {
                //     required: true
                // },
                liveAddress: {
                    required: true,
                    maxlength: 100
                },
                experience: {
                    required: true,
                    maxlength: 800
                },
                mobile: {
                    isPhone: true
                }
            },
            messages: {
                imgUrl: {
                    required: icon + "请上传寸照"
                },
                username: {
                    required: icon + "请输入用户名"
                },
                name: {
                    required: icon + "请输入姓名"
                },
                sex: {
                    required: icon + "请选择性别"
                },
                dateOfBirth: {
                    required: icon + "请选择出生日期"
                },
                nation: {
                    required: icon + "请选择民族"
                },
                education: {
                    required: icon + "请选择学历"
                },
                major: {
                    required: icon + "请输入专业"
                },
                politicalAffiliation: {
                    required: icon + "请输入政治面貌"
                },
                officialCapacity: {
                    required: icon + "请输入职务职称"
                },
                idNumber: {
                    required: icon + "请输入身份证号"
                },

                orgName: {
                    required: icon + "请输入所在单位名称"
                },
                liveAddress: {
                    required: icon + "请输入现居住地址"
                },
                experience: {
                    required: icon + "请输入学习、工作经历"
                }
            }
        })
    }

</script>
</html>